<template>
  <div class="buy-member-card">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="764px">
      <div class="title" slot="title">购买套餐</div>
      <div class="buy-member-card-content">
        <div class="content-title">持卡人信息</div>
        <div v-if="!validateNull(memberInfo)" class="content-item">
          <div><span class="s1">姓名：</span><span>{{memberInfo.name}}</span></div>
          <div><span class="s1">会员卡：</span><span>{{memberInfo.type}}</span></div>
          <div><span class="s1">手机号码：</span><span>{{memberInfo.phone}}</span></div>
        </div>
        <div v-else>
          <div class="content-item-title">
            <span class="s1">持卡人姓名：</span>
            <span class="s2"><el-input placeholder="请选择" disabled v-model="memberInfo.name"/></span>
            <i @click="getMembers" class="el-icon-user-solid"></i>
          </div>
          <div class="content-item-title">
            <span class="s1">会员卡：</span>
            <span class="s2"><el-input placeholder="请选择" disabled v-model="memberInfo.card"/></span>
          </div>
          <div class="content-item-title">
            <span class="s1">手机号码：</span>
            <span class="s2"><el-input placeholder="请选择" disabled v-model="memberInfo.phone"/></span>
          </div>
        </div>
        <div class="content-title">项目内容</div>
        <div class="content-item">
          <div class="item">
            <span class="s1">套餐</span>
            <span class="s2">
              <el-popover
                popper-class="buy-member-card-popover"
                placement="bottom-start"
                width="600"
                v-model="popoverVisible"
                trigger="click">
                <el-table :data="comboList">
                  <el-table-column property="name" label="名称"></el-table-column>
                  <el-table-column property="expireDate" label="有效期"></el-table-column>
                  <el-table-column property="totalNum" label="项目次数"></el-table-column>
                  <el-table-column property="amount" label="总金额"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="item">
                      <span @click="selectPlatterChange(item.row)" class="select-combo">选择</span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-select slot="reference" value="" disabled/>
              </el-popover>
            </span>
          </div>
          <div class="item">
            <span class="s1"><span class="required">*</span>有效期</span>
            <span class="s2">
                <el-date-picker v-model="expireDate" type="date" value-format="yyyy-MM-dd"
                                placeholder="选择日期"></el-date-picker>
            </span>
          </div>
        </div>
        <div class="content-table">
          <el-table :data="selectedCombo.projects" border>
            <el-table-column prop="type" label="类型"/>
            <el-table-column prop="name" label="项目名称"/>
            <el-table-column prop="num" label="次数"/>
            <el-table-column prop="price" label="单价"/>
            <el-table-column prop="amount" label="总价"/>
          </el-table>
        </div>
        <div class="content-title">结算</div>
        <div class="content-item">
          <div class="item">
            <span class="s1"><span class="required">*</span>支付方式</span>
            <span class="s2">
              <el-select v-model="payType" clearable>
                <el-option value="wx" label="微信"/>
                <el-option value="alipay" label="支付宝"/>
              </el-select>
            </span>
          </div>
          <div class="item">
            <span class="s1">应收金额</span>
            <span class="s2">
                <el-input v-model="totalAmount" placeholder="请输入"/>
            </span>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <members-dialog ref="membersDialog" @memberPages="getMembers"
                    @selectMember="getMember" :members="membersData"/>
  </div>
</template>

<script>
import { validatenull } from '@/utils/validate'
import MembersDialog from '@/views/member/dialog/membersDialog'

export default {
  name: 'buyMemberCard',
  components: { MembersDialog },
  data () {
    return {
      dialogVisible: false,
      popoverVisible: false,
      payType: '',
      expireDate: '',
      totalAmount: '',
      comboList: [
        {
          id: 10,
          name: '拔罐1',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 },
            { id: 11, parentId: 10, type: '理疗', name: '拔罐2', num: 10, price: 30, amount: 50 },
            { id: 12, parentId: 11, type: '理疗', name: '拔罐3', num: 10, price: 30, amount: 50 }
          ]
        },
        {
          id: 11,
          name: '拔罐2',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 },
            { id: 11, parentId: 10, type: '理疗', name: '拔罐2', num: 10, price: 30, amount: 50 }
          ]
        },
        {
          id: 12,
          name: '拔罐3',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 }
          ]
        },
        {
          id: 13,
          name: '拔罐是点点滴滴4',
          totalNum: 20,
          expireDate: '2022-10-23',
          amount: 50,
          projects: [
            { id: 10, parentId: 10, type: '理疗', name: '拔罐1', num: 10, price: 30, amount: 50 }
          ]
        }
      ],
      selectedCombo: {},
      memberInfo: {},
      membersData: { data: [], count: 16 }
    }
  },
  methods: {
    selectPlatterChange (item) {
      this.selectedCombo = item
      this.popoverVisible = false
    },
    getMembers (pageTerms) {
      pageTerms = pageTerms || { pageNo: 1, pageSize: 5 }
      this.membersData.data = [
        { id: 1, name: '李1', phone: '1666666666' }, { id: 1, name: '李2', phone: '1666666666' },
        { id: 1, name: '李3', phone: '1666666666' }, { id: 1, name: '李6', phone: '1666666666' },
        { id: 1, name: '李5', phone: '1666666666' }
      ]
      this.$refs.membersDialog.show()
    },
    getMember (member) {
      this.memberInfo = member
    },
    validateNull (val) {
      return validatenull(val)
    },
    show (id) {
      this.memberInfo = {}
      console.log(id)
      if (id) {
        this.memberInfo = { id: this.memberId, name: '来了1', type: '赠送', phone: '18888888' }
      }
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.buy-member-card {
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .buy-member-card-content {
    margin-top: -30px;
    .content-title {
      margin-top: 15px;
      color: rgba(0, 0, 0, 1);
    }
    .content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 40px;
      .s1 {
        color: rgba(0, 0, 0, 0.55);
        .required {
          color: #E23232;
        }
      }
      .s2 {
        margin-left: 20px;
      }
      .item {
        display: flex;
        align-items: center;
      }
    }
    .content-table{
      width: 82%;
      padding: 20px 0 0 85px;
    }
    .content-item-title{
      display: flex;
      align-items: center;
      margin: 10px 40px;
      .s1 {
        color: rgba(0, 0, 0, 0.75);
        width: 100px;
        text-align: right;
      }
      .s2{
        width: 300px;
      }
      i {
        cursor: pointer;
        margin-left: 10px;
        font-size: 20px;
        color: $mainBg;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
